<template>
	<view class="u-p-20">
		<block v-for="(item,index) in questionList" :key='index'>
			<view class="u-p-t-20 u-p-b-20">
				<text class="u-type-error">*</text> {{item.problem}}
			</view>
			<template v-if="item.radio">
				<u-radio-group v-model="item.val" wrap @change="radioGroupChange($event,item.id)">
					<u-radio v-for="(val, idx) in item.options" :key="idx" :name="val">
						{{ val }}
					</u-radio>
				</u-radio-group>
			</template>
			<template v-else>
				<u-checkbox-group wrap @change="radioGroupChange($event,item.id)">
					<u-checkbox v-model="item.checked" v-for="(item, index) in item.options" :key="index"
						:name="item.name">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</template>
		</block>
		<u-button class='u-m-t-50' type="primary" @click="confirm" :loading='loading' :disabled='disabled'>提交</u-button>
	</view>
</template>

<script>
	import {
		findQuestionList,
		saveAnswer
	} from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				questionList: [],
				loading: false,
				answer: [],
				disabled: true,
			}
		},
		onLoad() {
			this.findQuestionList()
		},
		methods: {
			findQuestionList() {
				findQuestionList({
					ownerId:this.userInfo.id
				}).then(res => {
					this.questionList = res.map((item, index) => {
						if (!item.content.length) {
							this.disabled = false
						}
						if (item.options.includes('是')) {
							return {
								id: item.id,
								options: item.options,
								radio: true,
								problem: item.problem,
								val:item.content[0]
							}
						} else {
							return {
								id: item.id,
								problem: item.problem,
								options: item.options.map((val, index) => {
									return {
										name: val,
										checked: item.content.join(',').includes(val)
									}
								})
							}
						}
					})
					console.log(this.questionList)
					this.answer = res.map(item => {
						return {
							questionId: item.id,
							content: item.content
						}
					})
				})
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e, i) {
				this.answer = this.answer.map(item => {
					if (item.questionId == i) {
						item.content = typeof e=='string'?[e]:e
					}
					return item
				})
			},
			confirm() {
				for (var i = 0; i < this.answer.length; i++) {
					if(!this.answer[i].content.length){
						this.$u.toast('请回答全部问题')
						return
					}
				}
				console.log(this.answer)
				this.loading = true
				this.$u.debounce(
					Promise.all(
						this.answer.map(item => {
							item.content.map(val=>{
								saveAnswer({
									ownerId:this.userInfo.id,
									questionId:item.questionId,
									content:val
								})
							})
						})
					).then(res => {
						this.loading = false
						this.$u.toast('提交成功')
						setTimeout(() => {
							this.$u.route({
								type: 'back',
							})
						}, 800)
					}).catch(err => {
						this.loading = false
					})
				)
			}
		}
	}
</script>

<style>

</style>
